<template>
  <el-row :gutter="16">
    <el-col :span="18">
      <el-row>
        <el-col :span="24">
          <div id="mapContainer" style="width: 100%; height: 500px;"></div>
        </el-col>
        <el-col :span="24" style="text-align: center;line-height: 30px;font-size: 16px;">
          <p>{{address}}</p>
        </el-col>
        <el-col :span="24" style="text-align:center;">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="setAddress">确认</el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-row>
        <el-col :span="16">
          <el-input v-model="searchText" placeholder="输入关键字搜索地点"></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="searchLocation">
            搜索
          </el-button>
        </el-col>
        <el-col :span="24" v-for="item in addressArr" :key="item.id" @click="addressClick(item)">
          <p class="title">{{item.name}}</p>
          <p class="address">{{item.address}}</p>
        </el-col>
      </el-row>
    </el-col>

  </el-row>
</template>

<script>
export default {
  name: 'MapComponent',
  mounted() {
    this.$nextTick(() => {
      this.initMap();
    });
  },
  data() {
    return{
      map:null,
      address:'请点击上方地图获取位置',
      latLong:null,
      searchText:undefined,
      localsearch: null,
      addressArr: []
    }
  },
  methods: {
    initMap() {
      //初始化地图对象
      this.map = new T.Map("mapContainer");
      //设置显示地图的中心点和级别
      this.map.centerAndZoom(new T.LngLat('108.692870', '30.932880'), 14);
      //创建缩放平移控件对象
      let control = new T.Control.Zoom();
      //添加缩放平移控件
      this.map.addControl(control);

      // 添加点击事件监听器
      this.map.on('click', (e) => {
        console.log('点击位置:', e); // 输出经纬度信息到控制台
        this.setMarker(e.lnglat.lng,e.lnglat.lat);
        this.getGeocoderFun(e.lnglat.lng,e.lnglat.lat);
      });

    },
    setMarker(lng, lat){
      this.map.clearOverLays(); // 清空原来的标注点
      let point = new T.LngLat(lng, lat);
      let marker = new T.Marker(point);
      this.map.addOverLay(marker); // 添加标注点
    },
    async getGeocoderFun(lon, lat) {
      let T = window.T;
      let geocoder = new T.Geocoder();
      geocoder.getLocation(new T.LngLat(lon, lat), (result) => {
        this.address = result.formatted_address;
        this.latLong = lon + ',' + lat;
      });
    },
    searchLocation() {
      let config = {
        pageCapacity: 10, //每页显示的数量
        onSearchComplete: this.localSearchResult, //接收数据的回调函数
      }
      this.localsearch = new T.LocalSearch(this.map, config)
      this.localsearch.search(this.searchText)
    },
    localSearchResult(res){
      this.addressArr = res.pois;
    },
    setAddress(){
      console.log(this.address,this.latLong);
      this.$emit("setAddress", this.address);
      this.$emit("setPosition", [this.latLong.split(',')[0],this.latLong.split(',')[1]]);
    },
    addressClick(data){
      this.$emit("setAddress", data.address);
      this.$emit("setPosition", [data.lonlat.split(',')[0],data.lonlat.split(',')[1]]);
    },
    cancel(){
      this.$emit("closeMapaddressDialog");
    }
  }
}
</script>
<style scoped  lang="scss">
.title{
  color: black;font-size: 16px;margin-top: 5px;margin-bottom: 0px;
}

.address{
  color: gray;font-size: 14px;margin-top: 5px;padding-bottom: 5px;margin-bottom: 5px; border-bottom: 1px solid rgb(244,244,244);
}
</style>
